<template>
    <div>
        <div class="navbar-div">
            <van-nav-bar 
                title="商品详情"
                left-text="返回"
                left-arrow
                @click-left="onClickLeft"
            />
        </div>
        <div class="topimage-div">
            <img :src="goodsInfo.IMAGE1" alt="" width="100%">
        </div>
        <div class="goods-name">{{goodsInfo.NAME}}</div>
        <div class="goods-price">价格：{{goodsInfo.PRESENT_PRICE}}</div>
        <div>
            <van-tabs v-model="active" swipeable sticky>
                <van-tab title="商品详情">
                    <div class="detail" v-html="goodsInfo.DETAIL">
                        商品详情况
                    </div>
                </van-tab>
                <van-tab title="商品评价">
                    评价模块开发中...
                </van-tab>
            </van-tabs>
        </div>
        <div class="goods-footer">
            <div>
                <van-button type="primary" size="large" @click="addGoodsToCart">加入购物车</van-button>
            </div>
            <div>
                <van-button type="warning" size="large">直接购买</van-button>
            </div>
        </div>
    </div>
</template>

<script>
import { Toast } from 'vant';
import axios from 'axios'
import url from '@/serviceAPI.confing.js'
export default {
    data(){
        return {
            goodsId:'',
            goodsInfo:'',
            active:0
        }
    },
    created(){
        this.goodsId = this.$route.query.goodsId?this.$route.query.goodsId:this.$route.params.goodsId
        console.log(this.goodsId)
        this.getInfo()
    },
    methods:{
        getInfo(){
            axios({
                url:url.getDetailGoodsInfo,
                method:'post',
                data:{
                    goodsId:this.goodsId
                }
            })
            .then(response=>{
                console.log(response)
                if(response.data.code==200 && response.data.message){
                    this.goodsInfo = response.data.message
                }else{
                    // Toast("服务器错误，数据获取失败！")
                    this.$router.push({name:'CategoryList'})
                }
            })
            .catch(error=>{
                console.log(error)
            })
        },
        onClickLeft(){
            this.$router.go(-1)
        },
        //加入购物车
        addGoodsToCart(){
            //取出购物车商品的数据
            let cartInfo = localStorage.cartInfo ? JSON.parse(localStorage.cartInfo) : []
            console.log(cartInfo)
            //使用find函数循环本地储存的数据，判断当前商品是否存在
            let isHaveGoods = cartInfo.find(cart=>cart.goodsId == this.goodsId)
            console.log(isHaveGoods)
            if(!isHaveGoods){
                //如果商品不存在就添加一个
                let newGoodsInfo = {
                    goodsId:this.goodsInfo.ID,
                    Name:this.goodsInfo.NAME,
                    price:this.goodsInfo.PRESENT_PRICE,
                    image:this.goodsInfo.IMAGE1,
                    count:1
                }
                //添加到临时数组里面去
                cartInfo.push(newGoodsInfo)
                //添加到本地储存
                localStorage.cartInfo = JSON.stringify(cartInfo) 
                Toast.success('添加成功')
                this.$router.push({name:'Cart'})
            }else{
                Toast.success('已有此商品')
            }
        }
    }
}
</script>

<style scoped>
.detail{
    font-size:0px;
    display:block;
}
.goods-name{
    background-color: #fff;
}
.goods-price{
    background-color: #fff;
}
.goods-footer{
    position:fixed;
    bottom:0px;
    left:0px;
    width:100%;
    background:#FFF;

    display:flex;
    flex-flow: row;
}
.goods-footer > div{
    flex:1;
    padding:5px;
}
</style>